import React, { Component } from 'react'
import { NavBar, Icon, Modal } from "antd-mobile"
import empty from "../../assets/images/empty.jpg";
import "./Cart.css";
// 1.引入一个connect  把属性和方法注入到组件中
import { connect } from "react-redux"
const alert = Modal.alert;
class Cart extends Component {
    state = {
        carts: [],
        allCheked: true,
        totalPrice:0,
        sum:0
    }
    //获取本地缓存中对的购物车数据
    componentDidMount() {
        let carts_str = localStorage.getItem("carts");
        let carts = JSON.parse(carts_str || "[]");
        let allCheked = true;
        let bool = carts.some((v, i) => {
            //只要有一个假的
            if (!v.checked) {
                return true;//说明购物小车没有被全选
            }
        })
        if (bool) {
            allCheked = false;
        }
        this.setState({ allCheked })
        this.saveCarts(carts)
    }
    //保存小车
    saveCarts = (carts) => {
        this.carts = carts;
        localStorage.setItem("carts", JSON.stringify(carts));
        this.calcTotalPrice()//计算总价
        this.calcAmount()//计算总数
        this.setState({
            carts
        })
    }
    //计算总价
    calcTotalPrice = (params) => {
        let totalPrice = 0;
        this.carts.forEach(v=>{
            //选中状态下
            if(v.checked){
                //计算总价
                totalPrice += v.goods_price*v.num
            }
        })
        this.setState({
            totalPrice
        })
    }
    //计算数量
    calcAmount = (params) => {
        let sum = 0;
        this.carts.forEach(v=>{
            if(v.checked){
                sum += v.num;
            }
        })
        this.setState({
            sum
        })
    }
    

    //页面商品的选中按钮
    handleSelect = (index) => {
        console.log(this.carts);
        let carts = this.carts;
        carts[index].checked = !carts[index].checked;
        let bool = carts.some((v) => {
            if (!v.checked) {
                return true;
            }
        })
        if (bool) {
            this.setState({
                allCheked: false,
            })
        } else {
            this.setState({
                allCheked: true,
            })
        }
        this.saveCarts(carts)
    }

    handleAllCheck = (params) => {
        let allCheked = !this.state.allCheked;
        //如果全选是true
        this.carts.forEach((v) => {
            v.checked = allCheked;
        })
        //保存到购物小车中
        this.saveCarts(this.carts);
        this.setState({
            allCheked,
        })
    }
    handleAdd = (index) => {
        let carts = this.carts;
        carts[index].num++;
        this.saveCarts(carts);
    }
    handleSub = (index) => {
        let carts = this.carts;
        if (carts[index].num - 1 === 0) {
            //提示用户
            //再减少就要删除商品
            alert('删除商品', '您确定要删除商品吗???', [
                { text: '取消', onPress: () => console.log('cancel') },
                {
                    text: '确定', onPress: () => {
                        carts.splice(index, 1);
                        this.saveCarts(carts);
                    }
                },
            ])

        }else{
            --carts[index].num;
            this.saveCarts(carts);
        }
    }
    //去支付页面
    gotoPay =(params) => {
        console.log();
        this.props.history.push("/pay")
    }
    
    render() {
        return (
            <div className="yg-cart">
                <div className="yg-cart-nav">
                    <NavBar
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}
                    >{this.props.title}</NavBar>
                </div>
                {
                    !!this.state.carts.length ? (
                        <div className="yg-cart-content">
                            {/* 购物小车列表的开始 */}
                            <div className="cart-content-list">
                                {this.state.carts.map((v, index) => {
                                    return (
                                        <div className="content-list-item" key={v.goods_id}>
                                            <div className="list-item-left" onClick={this.handleSelect.bind(this, index)}>
                                                <i className={v.checked ? "iconfont icon-shanchu-xuanzhong" : "cicle"}></i>
                                            </div>
                                            <div className="list-item-middle">
                                                <img src={v.goods_small_logo} alt="" />
                                            </div>
                                            <div className="list-item-right">
                                                <div className="item-right-top">{v.goods_name}</div>
                                                <div className="item-right-bottom">
                                                    <div className="right-bottom-left">￥{v.goods_price}</div>
                                                    <div className="right-bottom-right">
                                                        <i className="iconfont icon-iconset0187" onClick={this.handleSub.bind(this, index)}></i>
                                                        <span className="num">{v.num}</span>
                                                        <i className="iconfont icon-icon-" onClick={this.handleAdd.bind(this, index)}></i>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    )
                                })}
                            </div>
                            {/* 购物小车列表的结束 */}
                            {/* 购物车结算的开始 */}
                            <div className="cart-content-bottom">
                                <div className="content-bottom-left">
                                    <div className="all-checked" onClick={this.handleAllCheck}>
                                        <i className={this.state.allCheked ? "iconfont icon-shanchu-xuanzhong" : "cicle"}></i>
                                        <span className="text">全选</span>
                                    </div>
                                    <div className="totalPrice">
                                        <span className="text1">合计:</span>
                            <span className="price">￥{this.state.totalPrice}</span>
                                    </div>
                                </div>
                                <div className="content-bottom-right">
                                    <div className="pay">
                                        {this.state.sum?<span className="text3" onClick={this.gotoPay}>去结算({this.state.sum})</span>:<span className="text5">去结算({this.state.sum})</span>}
                                    </div>
                                </div>
                            </div>
                            {/* 购物车结算的结束 */}
                        </div>
                    ) : <div className="yg-cart-empty">
                            <img src={empty} alt="" />
                            <h3 className="empty_text">
                                <a href="#/category">去逛逛</a>
                            </h3>
                        </div>
                }
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        title: state.cartsReducer.title,
    }
}
const mapDispatchToProps = (dispatch) => {
    return {};
}


export default connect(mapStateToProps, mapDispatchToProps)(Cart);
